<div id="app">
  <username class="username" :error="errorMsg" @input="onInput"></username>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const Username = {
    props: ['error'],
    template: `
    <fieldset>
      <legend>用户名</legend>
      <input v-bind="$attrs">
      <div>{{error}}</div>
    </fieldset>
    `
  }

  Vue.createApp({
    components: { Username },
    data() {
      return {  errorMsg: '' }
    },
    methods: {
      onInput(e){
        this.errorMsg = e.target.value.length<6?"长度不够":""
      }
    }
  }).mount('#app')
</script>